<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h4 class="modal-title">{{ trans('user-pages.create.person-info') }}</h4>
</div>
<div class="portlet modal-body portlet-body form">
    <form class="form-horizontal" id="form-modal" action="{{$route}}" method="post">
        <div class="form-body">
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="alert"></button>
                {{ trans('validation.custom.error-title') }}
            </div>
            <div class="alert alert-success display-hide">
                <button class="close" data-close="alert"></button>
                {{ trans('validation.custom.success-title') }}
            </div>
            <div class="row" style="margin-left: 0; margin-right: 0;">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="saint">{{ trans('user.saint') }}</label>
                        <div class="col-md-8">
                            <input type="text" value="{{ @$User->saint }}" name="saint" id="saint" class="form-control margin-bottom-5">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="username">{{ trans('user.username') }} <span class="required">*</span></label>
                        <div class="col-md-8">
                            <input type="text" value="{{ @$User->username }}" class="form-control margin-bottom-5" name="username" id="username">
                        </div>
                    </div>
                </div>
            </div>
            <!--/row-->
            <div class="row" style="margin-left: 0; margin-right: 0;">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="gender">{{ trans('user.gender-name') }}</label>
                        <div class="col-md-8">
                            <select class="form-control margin-bottom-5" name="gender" id="gender">
                                @foreach ( trans('user.gender') as $key => $value)
                                <option value="{{ $key }}" <?php echo @$User->gender == $key ? 'selected' : null ?>>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="birthday">{{ trans('user.birthday') }} <span class="required">*</span></label>
                        <div class="col-md-8">
                            <div class="input-group date date-picker margin-bottom-5" data-date-format="dd-mm-yyyy">
                                <input type="text" value="{{ @CNamHoa::ConvertDate($User->birthday) }}" class="form-control" id="birthday" readonly name="birthday">
                                <span class="input-group-btn">
                                    <button class="btn" type="button"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/span-->
            </div>
            <!--/row-->
            <div class="row" style="margin-left: 0; margin-right: 0;">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="address">{{ trans('user.phone') }}</label>
                        <div class="col-md-10">
                            <input type="text" value="{{ @$User->phone }}" name="phone" id="phone" class="form-control margin-bottom-5">
                        </div>
                    </div>
                </div>
            </div>
            <!--/row-->
            <div class="row" style="margin-left: 0; margin-right: 0;">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="control-label col-md-2" for="address">{{ trans('user.address') }}</label>
                        <div class="col-md-10">
                            <input type="text" value="{{ @$User->address }}" name="address" id="address" class="form-control margin-bottom-5">
                        </div>
                    </div>
                </div>
            </div>
            <!--/row-->
            <h3 class="form-section">{{ trans('dear.dear-title') }}</h3>
            <div class="row" style="margin-left: 0; margin-right: 0;">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="father_saint">{{ trans('user.saint') }} {{ @$Option['RELATIONSHIP']['CHA']->data }}</label>
                        <div class="col-md-8">
                            <div class="input-icon right">

                                <input type="text" value="{{ @$User->father_saint }}" name="father_saint" id="father_saint" class="form-control margin-bottom-5">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="father_name">{{ trans('user.username') }} {{ @$Option['RELATIONSHIP']['CHA']->data }}</label>
                        <div class="col-md-8">
                            <input type="text" value="{{ @$User->father_name }}" name="father_name" id="father_name" class="form-control margin-bottom-5">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-left: 0; margin-right: 0;">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="mother_saint">{{ trans('user.saint') }} {{ @$Option['RELATIONSHIP']['ME']->data }}</label>
                        <div class="col-md-8">
                            <div class="input-icon right">

                                <input type="text" value="{{ @$User->mother_saint }}" name="mother_saint" id="mother_saint" class="form-control margin-bottom-5">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label col-md-4" for="mother_name">{{ trans('user.username') }} {{ @$Option['RELATIONSHIP']['ME']->data }}</label>
                        <div class="col-md-8">
                            <input type="text" value="{{ @$User->mother_name }}" name="mother_name" id="mother_name" class="form-control margin-bottom-5">
                        </div>
                    </div>
                </div>
            </div>
            <!--/row-->
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn default btn-close-modal" data-dismiss="modal">{{ trans('system.button.cancel') }}</button>
    <button type="button" class="btn blue btn-update">{{ trans('system.button.save') }}</button>
</div>
<script type="text/javascript">
    //init date pickers
    $('.date-picker').datepicker({
        rtl: Metronic.isRTL(),
        language: 'vi',
        autoclose: true
    });
    
    var form = $('#form-modal');
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);
 
    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            username: {
                minlength: 10,
                required: true
            },
            birthday: {
                regex: /(\d{2})-(\d{2})-(\d{4})/,
                required: true
            },
            baptism_date: {
                regex: /[0-9][0-9]-[0-1][0-9]-[1-2][0-9][0-9][0-9]/
            },
            eucharist_date: {
                regex: /[0-9][0-9]-[0-1][0-9]-[1-2][0-9][0-9][0-9]/
            },
            confirmation_date: {
                regex: /[0-9][0-9]-[0-1][0-9]-[1-2][0-9][0-9][0-9]/
            }
        },
        messages: {
            username: {
                minlength: 'Tối thiểu 10 ký tự',
                required: 'Bắt buộc nhập'
            },
            email: {
                email: 'Email không hợp lệ'
            },
            password: {
                minlength: 'Tối thiểu 6 ký tự',
                required: 'Bắt buộc nhập',
                regex: "Mật Khẩu phải chứa ký tự số <strong>0-9</strong> và chữ cái <strong>a-Z</strong>"
            },
            retype_password: {
                minlength: 'Tối thiểu 6 ký tự',
                required: 'Bắt buộc nhập',
                equalTo : "Chưa khớp với Mât Khẩu Mới"
            }
        },
 
        invalidHandler: function (event, validator) { //display error alert on form submit 
            success.hide();
            error.show();
            Metronic.scrollTo(error, -200);
        },
 
        errorPlacement: function (error, element) { // render error placement for each input type
            var icon = $(element).parent('.input-icon').children('i');
            icon.removeClass('fa-check').addClass("fa-warning"); 
            icon.attr("data-original-title", error.text()).tooltip({
                'container': 'body'
            });
        },
 
        highlight: function (element) { // hightlight error inputs
            $(element)
            .closest('.form-group').addClass('has-error'); // set error class to the control group 
        },
 
        unhighlight: function (element) { // revert the change done by hightlight
 
        },
 
        success: function (label, element) {
            var icon = $(element).parent('.input-icon').children('i');
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            icon.removeClass("fa-warning").addClass("fa-check");
        },
 
        submitHandler: function (form) {
            success.show();
            error.hide();
 
            form.submit();
        }
    });
    
    $('.btn-update','div.modal-footer').click(function () {
        if (!form.valid()) { return; }
        
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'json'
        }).done(function(response) {
            if (response.code == 200) {
                success.find('span').text(response.message);
                success.show();
                error.hide();
                $('.btn-close-modal').click();
            }
            else {
                error.find('span').text(response.message);
                error.show();
                success.hide();
            }
        })
        .fail(function() {
            error.find('span').text('Check Your Connection.');
            error.show();
            success.hide();
        });
    });
</script>